<template>
  <div class="payments-container">
    <div class="methods-list">
      <!-- head return-->
      <div class="payments-head">
        <van-nav-bar title="付款方式">
          <template #left>
            <van-icon name="arrow-left" size="24" color="black" @click="backOrder" />
          </template>
        </van-nav-bar>
      </div>

      <div class="payments-list">
        <div class="remaining-sum" @click="radio = '1'">
          <div class="list-box">
            <div class="logo-box">
              <span class="iconfont icon-yue"></span>
              <span>余额</span>
            </div>
            <div class="money-num">
              <span>￥{{accountData.remainingSum}}</span>
              <van-radio-group v-model="radio">
                <van-radio name="1"></van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="counter-box" @click="nowSubmitOrder.takeFoodType==='外卖'?null:radio = '2'"
          :style="{background:nowSubmitOrder.takeFoodType==='外卖'?'#f5f5f5':'white'}">
          <div class="list-box">
            <div class="logo-box">
              <span class="iconfont icon-guitai"></span>
              <span>柜台结算</span>
            </div>
            <div>
              <van-radio-group v-model="radio" :disabled="nowSubmitOrder.takeFoodType==='外卖'?true:false">
                <van-radio name="2"></van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="delivery-box"
          @click="nowSubmitOrder.takeFoodType==='堂食'||nowSubmitOrder.takeFoodType==='自提'?null:radio = '3'"
          :style="{background:nowSubmitOrder.takeFoodType==='堂食'||nowSubmitOrder.takeFoodType==='自提'?'#f5f5f5':'white'}">
          <div class="list-box">
            <div class="logo-box">
              <span class="iconfont icon-waimai"></span>
              <span>外送到付</span>
            </div>
            <div>
              <van-radio-group v-model="radio"
                :disabled="nowSubmitOrder.takeFoodType==='堂食'||nowSubmitOrder.takeFoodType==='自提'?true:false">
                <van-radio name="3"></van-radio>
              </van-radio-group>
            </div>
          </div>
        </div>
        <div class="use-bankcard">
          <div class="card-box" v-for="(item, i) in creditCard" :key="item.id" @click="radio = 4 + i">
            <div class="card-info">
              <span class="iconfont card-logo"></span>
              <span>{{item.number}}</span>
              <span>有效期至 {{item.cardDate}}</span>
            </div>
            <van-radio-group v-model="radio">
              <van-radio :name="4 + i"></van-radio>
            </van-radio-group>
          </div>
          <div class="addCard-btn">
            <van-button plain type="info" @click="$router.push('/home/addCard')">添加银行卡
              <van-icon name="arrow" />
            </van-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 提交订单按钮模块 -->
    <div class="pay-module">
      <div class="pay-box">
        <div class="number-box">
          <span class="sum-num">￥{{nowSubmitOrder.expensesList.FinalTotalSum}}</span>
        </div>
        <div class="pay-button" @click="enterPayments">
          <span>确认付款</span>
        </div>
      </div>
    </div>

    <van-overlay :show="show">
      <div class="passw-box">
        <div class="money-content">
          <div class="passw-title">
            <van-icon name="cross" @click="show=false" />
            <span>请输入支付密码</span>
            <van-icon name="question-o" />
          </div>
          <div class="sum-value">
            <span>外卖订单</span>
            <span>￥{{nowSubmitOrder.expensesList.FinalTotalSum}}</span>
          </div>
        </div>
        <div class="passw-content">
          <div class="methods-title">
            <span>支付方式</span>
            <span v-if="isError" class="isError">密码错误</span>
            <span class="pay-menthods">{{nowSubmitOrder.payMethods}}</span>
          </div>
          <div class="passw-input">
            <!-- 密码输入框 -->
            <van-password-input :value="value" :gutter="9" :focused="showKeyboard" @focus="showKeyboard=true" />
          </div>
        </div>
        <!-- 数字键盘 -->
        <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard=false" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  props: ['creditCard', 'accountData'],
  data() {
    return {
      radio: '1',
      nowSubmitOrder: {},
      value: '',
      showKeyboard: false,
      show: false,
      isError: false
    }
  },
  created() {
    // 初始化下单数据
    this.nowSubmitOrder = this.$store.state.nowSubmitOrder
  },
  watch: {
    value(newVal) {
      if (this.value === '000000') {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 1200
        })
        setTimeout(() => {
          // <--- 将当前订单发送出去 --->
          this.$store.commit('sendPaidOrder', this.nowSubmitOrder)
          this.$router.push('/home/paystate')
        }, 1200)
      } else if (this.value.length === 6) {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 600
        })
        setTimeout(() => {
          this.isError = true
        }, 600)
      } else if (this.value.length < 6) {
        this.isError = false
      }
    }
  },
  methods: {
    backOrder() {
      this.$router.push('/home/view')
    },
    // <--- 确认支付订单 --->
    enterPayments() {
      switch (this.radio) {
        case '1':
          this.nowSubmitOrder.payMethods = '余额'
          break
        case '2':
          this.nowSubmitOrder.payMethods = '****'
          break
        case '3':
          this.nowSubmitOrder.payMethods = '****'
          break
        default:
          var cardNum = this.creditCard[Number(this.radio) - 4].number.replace(/\s/g, '').replace(/[^\d]/g, '')
          var cardType = this.creditCard[Number(this.radio) - 4].type
          this.nowSubmitOrder.payMethods = cardType + ' ' + cardNum
          break
      }
      if (this.radio !== '3' && this.radio !== '2') {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 300
        })
        setTimeout(() => {
          this.show = this.showKeyboard = true
        }, 360)
      } else {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 900
        })
        setTimeout(() => {
          this.$store.commit('sendPaidOrder', this.nowSubmitOrder)
          this.$router.push('/home/paystate')
        }, 900)
      }
    }
  }
}
</script>

<style lang="less" scoped>
// 支付密码界面样式
.van-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 2;
  .passw-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 210px;
    border-radius: 9px;
    margin-bottom: 6em;
    background-color: white;
    .money-content {
      width: 90%;
      height: 55%;
      border-bottom: 0.06em solid #e6e6e6;
      .passw-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 30%;
        font-size: 0.9em;
        /deep/.van-icon-cross,
        .van-icon-question-o {
          color: orange;
          font-size: 1.2em;
        }
        span:nth-child(2) {
          font-size: 1em;
        }
      }
      .sum-value {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 70%;
        span:nth-child(1) {
          font-size: 0.8em;
          color: #6e6e6e;
        }
        span:nth-child(2) {
          font-size: 1.2em;
          font-weight: bolder;
        }
      }
    }
    .passw-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      height: 45%;
      .methods-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        height: 30%;
        font-size: 0.9em;
        span:nth-child(1) {
          font-size: 0.9em;
          color: #9c9c9c;
        }
        .isError {
          font-size: 0.9em;
          font-weight: bolder;
          color: red;
        }
        .pay-menthods {
          font-size: 0.9em;
          font-weight: bolder;
          color: orange;
        }
      }
      .passw-input {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 70%;
        /deep/.van-password-input {
          width: 100%;
          .van-password-input__security {
            height: 30px;
            .van-password-input__item {
              border-radius: 3px;
              background-color: #ededed;
            }
          }
        }
      }
    }
  }
}

.methods-list {
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: 640px;
  background: #ededed;
  z-index: 2;
}

/deep/.van-radio__icon--checked .van-icon {
  background: orange;
  border-color: orange;
}

.payments-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ededed;
  .remaining-sum,
  .counter-box,
  .delivery-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 98%;
    height: 50px;
    margin-bottom: 0.4em;
    border-radius: 9px;
    background: white;
    .list-box {
      display: flex;
      width: 90%;
      justify-content: space-between;
      .money-num {
        display: flex;
        align-items: center;
        span:nth-child(1) {
          color: #bfbfbf;
        }
      }
      .logo-box {
        display: flex;
        align-items: center;
        .icon-yue:before {
          content: '\e630';
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        .icon-waimai:before {
          content: '\e607';
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        .icon-guitai:before {
          content: '\e608';
          font-size: 1.5em;
          margin-right: 0.3em;
        }
        span:nth-child(2) {
          color: #bfbfbf;
        }
      }
      /deep/.van-radio__icon--checked .van-icon {
        margin-left: 0.9em;
      }
      /deep/.van-icon-success {
        margin-left: 0.9em;
      }
    }
  }
  .use-bankcard {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 98%;
    border-radius: 9px;
    background: white;
    .card-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      height: 50px;
      border-bottom: 0.06em solid #f0f0f0;
    }
    .addCard-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 50px;
      /deep/.van-button--plain.van-button--info {
        display: flex;
        width: 100%;
        border: none;
        color: orange;
        padding-left: 1em;
        font-size: 1.1em;
        .van-icon-arrow {
          position: absolute;
          right: 0.9em;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
    .card-info {
      display: flex;
      align-items: center;
      color: #bfbfbf;
      .card-logo:before {
        content: '\e678';
        font-size: 1.5em;
        margin-right: 0.3em;
      }
      span:nth-child(2) {
        margin-right: 0.3em;
      }
      span:nth-child(3) {
        font-size: 0.6em;
      }
    }
  }
}
.pay-module {
  position: fixed;
  max-width: 640px;
  width: 100%;
  height: 60px;
  bottom: 0;
  z-index: 2;
  background: none;
  .pay-box {
    overflow: hidden;
    position: absolute;
    display: flex;
    flex-direction: initial;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: #fafafa;
    .number-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 60%;
      height: 100%;
      .sum-num {
        font-size: 1.2em;
        margin-left: 15px;
        color: #666666;
      }
    }
    .pay-button {
      width: 40%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      background-color: orange;
      color: white;
      font-size: 1.2em;
    }
  }
}
</style>
